<template>
  <div class="panel left-top">
    <div class="info-cards">
      <div class="card">
        <div class="card-icon">
          <el-icon><MapLocation /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-title">总面积</div>
          <div class="card-value">
            <div class="flip-number" data-value="1302">0000</div>
            <span class="unit">亩</span>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-icon">
          <el-icon><Crop /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-title">种植面积</div>
          <div class="card-value">
            <div class="flip-number" data-value="878">0000</div>
            <span class="unit">亩</span>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-icon">
          <el-icon><Monitor /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-title">设备数量</div>
          <div class="card-value">
            <div class="flip-number" data-value="37">000</div>
            <span class="unit">台</span>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-icon">
          <el-icon><User /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-title">人员数量</div>
          <div class="card-value">
            <div class="flip-number" data-value="56">00</div>
            <span class="unit">人</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MapLocation, Crop, Monitor, User } from '@element-plus/icons-vue'
import { onMounted } from 'vue'

onMounted(() => {
  const flipNumbers = document.querySelectorAll('.flip-number')
  flipNumbers.forEach((number) => {
    const targetValue = number.getAttribute('data-value')
    if (!targetValue) return

    let currentValue = 0
    const duration = 1500 // 动画持续时间（毫秒）
    const steps = 30 // 动画步数
    const stepDuration = duration / steps
    const increment = parseInt(targetValue) / steps

    const interval = setInterval(() => {
      currentValue += increment
      if (currentValue >= parseInt(targetValue)) {
        currentValue = parseInt(targetValue)
        clearInterval(interval)
      }

      // 格式化数字，保持与目标值相同的位数
      const formattedValue = Math.floor(currentValue).toString().padStart(targetValue.length, '0')
      number.textContent = formattedValue
    }, stepDuration)
  })
})
</script>

<style scoped>
.panel {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.info-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 15px;
  padding: 15px;
  height: 100%;
}

.card {
  background: linear-gradient(135deg, rgba(18, 161, 127, 0.1) 0%, rgba(18, 161, 127, 0.3) 100%);
  border: 1px solid rgba(51, 255, 208, 0.2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 20px;
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(51, 255, 208, 0.2);
  border-color: rgba(51, 255, 208, 0.4);
}

.card-icon {
  width: 60px;
  height: 60px;
  background: rgba(51, 255, 208, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.card-icon .el-icon {
  font-size: 28px;
  color: #33ffd0;
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.card-value {
  display: flex;
  align-items: center;
  gap: 2px;
}

.flip-number {
  min-width: 120px;
  height: 48px;
  background: rgba(51, 255, 208, 0.1);
  border: 1px solid rgba(51, 255, 208, 0.3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(51, 255, 208, 0.3);
  position: relative;
  overflow: hidden;
  animation: flipIn 0.6s ease-out forwards;
  opacity: 0;
  transform: rotateX(90deg);
  letter-spacing: 2px;
}

.unit {
  font-size: 24px;
  color: #ffffff;
  margin-left: 4px;
  text-shadow: 0 0 10px rgba(51, 255, 208, 0.3);
}

@keyframes flipIn {
  0% {
    opacity: 0;
    transform: rotateX(90deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0);
  }
}
</style>
